<template>
    <view class="form">
        <view class=" flex-r">
            <text class="title">
                姓名
            </text>
            <input placeholder-class="placehoder-style" placeholder="请输入姓名" v-model="penging_data.name" />
        </view>
        <view class=" flex-r">
            <text class="title">
                身份证
            </text>
            <input type="number" placeholder-class="placehoder-style" v-model="penging_data.id_card"
                placeholder="请输入身份证号码" />
        </view>
        <view class="flex-r">
            <text class="title">
                手机号
            </text>
            <input type="number" placeholder-class="placehoder-style" v-model="penging_data.phone"
                placeholder="请输入手机号" />
        </view>
        <view class=" flex-r">
            <text class="title">
                现居地址
            </text>
            <picker mode="region" @change="selectProvine">
                <view class="flex-right">
                    <text>{{penging_data.address=="" ? '请选择现居地址' :penging_data.address}}</text>
                    <image class="" src="../../static/other/gengduo.svg">
                    </image>
                </view>
            </picker>
        </view>
        <view class=" flex-r">
            <text class="title">
                现居详细地址
            </text>
            <input placeholder-class="placehoder-style" v-model="penging_data.de_address" placeholder="请输入现居详细地址" />
        </view>
        <view class=" flex-r">
            <text class="title">
                疫苗人群分类
            </text>
            <picker mode="selector" :range="peopleKind" @change="celectPeoplekind">
                <view class="flex-right">
                    <text>{{penging_data.crowd_sort=="" ? '请选择疫苗人群分类' :penging_data.crowd_sort}}</text>
                    <image class="" src="../../static/other/gengduo.svg">
                    </image>
                </view>
            </picker>
        </view>
        <!-- 医院地址 -->
        <view class="hospatilAdress">
            <text class="name">{{responseData.data.Hospital}}</text>
            <text class="address">{{responseData.data.address}}</text>
            <view class="type">
                <text v-for="(item ,index) in responseData.data.company" :key="index">{{item}}</text>
            </view>
        </view>
        <!-- 时间 -->
        <view class="selectTime">
            <view v-for="(item ,index) in responseData.data.week" :key="index"
                :class="{time:true, selectTime:true,selectStyleclass:item.date == selectStyle ? true : false}"
                @click="selectDate(item.date)">
                <text>{{item.day}}</text>
                <text>{{item.date}}</text>
                <text>{{item.Have}}</text>
            </view>
        </view>
        <view class="felx-dataPart">
            <view class="M-timepart" v-for="(data,index) in responseData.data.lasting" :key="index">
                <view class="label">{{data.period}}</view>
                <view class="timePartsBox">
                    <view v-for="(item,index) in data.time" :key="index"
                        @click="selectDatepart(data.period,item.start_time,item.end_time,item.when)"
                        :class="{timeParts:true,selectStyleclass:item.start_time==selectDatepartstyle ? true : false}">
                        <text>{{item.start_time+'-'+item.end_time}}</text>
                        <text style="text-align:center">剩余{{item.over}}</text>
                    </view>
                </view>
            </view>
        </view>
        <!-- 底部按钮 -->
        <view style="height:300rpx"></view>
        <view class="submit">
            <text>取消</text>
            <text @click="resovid()">提交预约</text>
        </view>
    </view>
</template>
<script setup lang="ts">
import { reactive, toRefs, ref, watch, onMounted } from 'vue';
import RequestApi from '@/public/request';
import { newVaccine } from '@/public/decl-type'
//提交的表单数据
const submitData = reactive({
    penging_data: {
        name: "",
        id_card: "",
        phone: "",
        address: "",
        de_address: "",
        crowd_sort: "",
        date: "",
        period: "",
        reserve_time: "",
        when: 0
    }
});
//控制时间选中样式
let selectStyle = ref<any>('');
//控制时间段选中样式   
let selectDatepartstyle = ref<any>('')
//疫苗人群分类
const peopleKind = ref(['医疗卫生人员', '卫生系统内工作的其他人员', '因公出国人员',
    '对外劳务派遣人员', '留学生', '因私出国人员', '海关边检人员', '公安系统,消防人员',
    '党政机关,事业单位人员', '社区工作者', '教育工作者', '小学和中学学生', '其他人员'
])
//选择疫苗人群
function celectPeoplekind(data: any): void {
    submitData.penging_data.crowd_sort = peopleKind.value[data.detail.value];
}
//选择省市区
function selectProvine(data: any): void {
    const adressArray = data.detail.value;
    let address = ''
    adressArray.forEach((item: string) => {
        address += item + '-';
    });
    submitData.penging_data.address = address.slice(0, address.length - 1);
}
//选择预约时间
function selectDate(date: string): void {
    submitData.penging_data.date = date;
    selectStyle.value = date;
}
//选中预约时间段
function selectDatepart(period: string, start_time: string, end_time: string, when: number): void {
    selectDatepartstyle.value = start_time;
    submitData.penging_data.period = period;
    submitData.penging_data.reserve_time = start_time + '-' + end_time;
}
//请求得到的数据
let responseData = reactive<{ data: newVaccine }>({
    data: {
        Hospital: "",
        address: "",
        company: [],
        lasting: [],
        week: []
    }
})
const { penging_data } = toRefs(submitData);
//提交新冠疫苗预约
async function resovid() {
    uni.showLoading({ title: '提交中', mask: true })
    RequestApi.Rescovid(submitData.penging_data).then(res => {
        uni.hideLoading();
        uni.navigateTo({
            url: '/pages/vaccineOrder/index'
        })
    }).catch((err) => {
        console.log(err);
    })
}
onMounted(async function () {
    const res: any = await RequestApi.NewappTime();
    responseData.data = res.data.data[0];
})
</script>
<style lang="scss">
/* .a{} */
</style>